<template>
        <div id="footbar-container">
        <div class="footbar-item"></div>
        <div class="footbar-item">
            <a target='_blank' href="http://www.tbs.co.jp/anime/k-on/index-j.html"><img class="icon-pic" src="../../assets/elements/k-on.png" alt=""></a>
        </div>
        <div class="footbar-item">
            <a target='_blank' href='https://twitter.com/H1gh_and_Dry'><i class="fa fa-twitter fa-2x custom-icon"></i></a>
            <div class="seperate-line"></div>
            <div class="svg-holder">
                <a target='_blank' href="https://www.yuque.com/console.log">
                    <svg class="icon-svg logo___9UlwV size___3D2Zh" style="width: 40px; height: 28px; min-width: 81px;">
                    <use xlink:href="#logo">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 81 28" id="logo" width="100%" height="100%"><g fill="none" fill-rule="evenodd"><path d="M48.96 6.168c-.282 0-.472-.049-.57-.146-.099-.097-.148-.267-.148-.51 0-.23.05-.4.148-.508.098-.11.288-.164.57-.164h9.77c.257 0 .438.054.542.164.105.109.157.279.157.509 0 .242-.052.412-.157.51-.104.096-.285.145-.542.145h-5.336l-.442 1.855h3.68c.417 0 .748.022.994.064.245.042.426.127.542.255.117.127.19.315.221.564.03.248.046.579.046.991v1.892h1.067c.258 0 .439.054.543.164.104.109.156.279.156.509 0 .218-.052.382-.156.491-.104.11-.285.164-.543.164H48.334c-.27 0-.453-.055-.552-.164-.098-.109-.147-.273-.147-.491 0-.23.05-.4.147-.51.099-.109.283-.163.552-.163h2.282l.607-2.474H49.29c-.208 0-.365-.046-.47-.137-.103-.09-.155-.263-.155-.518 0-.424.208-.637.625-.637h2.245l.441-1.855H48.96zm10.027 13.188c0 .558-.104.956-.313 1.192-.208.236-.582.355-1.122.355h-6.77c-.553 0-.93-.119-1.132-.355-.203-.236-.304-.634-.304-1.192v-3.201c0-.546.101-.934.304-1.164.202-.23.58-.346 1.131-.346h6.771c.54 0 .914.115 1.122.346.209.23.313.618.313 1.164v3.201zM57.662 16.3c0-.206-.08-.309-.239-.309H50.91c-.147 0-.22.103-.22.31v2.946c0 .207.073.31.22.31h6.513c.16 0 .24-.103.24-.31V16.3zm-8.978 1.074c.208.17.31.348.304.536-.007.188-.132.404-.378.646-.319.328-.613.6-.883.819-.27.218-.595.467-.975.746-.245.17-.478.27-.699.3a.848.848 0 0 1-.589-.119 1.032 1.032 0 0 1-.395-.509c-.092-.23-.126-.515-.102-.855l.479-7.586c.024-.242-.08-.345-.313-.309l-1.693.182c-.355.036-.595.006-.717-.091-.123-.097-.196-.279-.22-.546-.025-.23.02-.403.137-.518.117-.115.328-.185.635-.21l1.913-.181c.589-.06 1.021.033 1.297.282.276.248.396.7.36 1.355l-.442 7.095c-.013.194.049.23.184.109a13.208 13.208 0 0 0 1.03-.928c.38-.4.736-.473 1.067-.218zm3.956-8.06l-.608 2.475h5.023V9.733c0-.182-.018-.297-.055-.345-.037-.049-.141-.073-.313-.073H52.64zm-4.968-.927c-.319.291-.687.218-1.104-.218a84.667 84.667 0 0 0-1.076-1.119c-.374-.382-.794-.78-1.26-1.191-.405-.34-.43-.704-.074-1.092a.557.557 0 0 1 .47-.182c.19.012.407.128.652.346.54.473.988.888 1.343 1.246.356.358.681.7.975 1.028.233.242.356.451.368.627.013.176-.085.361-.294.555zm28.636.2c-.368.23-.745.449-1.131.655-.386.206-.776.412-1.168.619.073.072.159.188.257.345.098.206.203.43.313.673l.331.728h5.133c.233 0 .405.052.515.155.11.103.166.276.166.518 0 .425-.227.637-.68.637h-5.465v1.273h4.912c.233 0 .405.052.515.155.11.103.166.276.166.518 0 .425-.227.637-.68.637h-4.913v1.219h4.784c.233 0 .404.051.515.154.11.103.165.276.165.519 0 .242-.055.41-.165.5-.11.091-.282.137-.515.137h-4.784v1.327h5.74c.454 0 .681.23.681.692 0 .242-.055.412-.166.51-.11.096-.282.145-.515.145H67.57v.09c0 .243-.058.416-.175.519-.116.103-.291.155-.524.155-.245 0-.42-.052-.524-.155-.105-.103-.157-.276-.157-.518v-8.096a154.592 154.592 0 0 1-1.582.364c-.38.085-.64.091-.782.018-.141-.072-.23-.248-.267-.527-.037-.23-.003-.403.101-.519.105-.115.298-.203.58-.263a39.981 39.981 0 0 0 4.26-1.146c1.355-.449 3.412-1.252 3.412-1.304V8.235v-3.54c0-.486.233-.728.7-.728.465 0 .698.242.698.727v3.984c1.076-.566 1.842-1.002 2.3-1.31.27-.17.49-.254.663-.254.171 0 .337.109.496.327.148.206.19.397.13.573-.062.176-.258.367-.59.573zm-6.44-3.802c.197.146.298.306.304.482.007.176-.095.41-.303.7a21.526 21.526 0 0 1-1.693 2.065 22.174 22.174 0 0 1-2.079 1.956c-.319.255-.57.391-.754.41-.184.017-.356-.077-.515-.283-.147-.194-.197-.373-.147-.536.049-.164.202-.361.46-.592a21.672 21.672 0 0 0 1.968-1.855 16.81 16.81 0 0 0 1.6-1.965c.21-.303.409-.479.599-.527.19-.049.377 0 .56.145zm5.888 1.165c-.233-.23-.364-.431-.395-.6-.03-.17.04-.34.211-.51.184-.17.362-.243.534-.218.172.024.38.145.626.363.552.51 1.143 1.125 1.775 1.847.632.721 1.26 1.5 1.886 2.337.208.28.325.51.35.692.024.182-.062.345-.258.49-.22.17-.42.228-.598.174-.178-.055-.39-.246-.635-.573a38.263 38.263 0 0 0-1.665-2.074 30.71 30.71 0 0 0-1.83-1.928zM67.57 19.356h5.648V18.03H67.57v1.327zm0-5.166h5.648v-1.273H67.57v1.273zm0 2.529h5.648v-1.22H67.57v1.22zm5.39-6.349a57.34 57.34 0 0 1-1.526.637c-.515.206-1.049.406-1.6.6h3.624a23.08 23.08 0 0 0-.405-.837c-.086-.157-.117-.29-.092-.4z" fill-opacity=".85" fill="#000"></path><g><g fill="#31CC79"><path d="M31.42 3.991l-2.564-.136s-.97-3.38-5.422-3.683c-4.452-.303-7.365-.113-7.365-.113s3.303 2.088 1.979 5.813c-.983 2.01-2.54 3.652-4.198 5.539L2.882 23.84c10.21-.148 16.23-.222 18.058-.222 5.13 0 9.464-4.417 9.287-9.332-.122-3.378-1.205-4.141-1.577-5.62-.373-1.48.373-3.84 2.77-4.676z" id="logo_a"></path></g><g fill-opacity=".6" fill="url(#logo_b)"><path d="M31.42 3.991l-2.564-.136s-.97-3.38-5.422-3.683c-4.452-.303-7.365-.113-7.365-.113s3.303 2.088 1.979 5.813c-.983 2.01-2.54 3.652-4.198 5.539L2.882 23.84c10.21-.148 16.23-.222 18.058-.222 5.13 0 9.464-4.417 9.287-9.332-.122-3.378-1.205-4.141-1.577-5.62-.373-1.48.373-3.84 2.77-4.676z" id="logo_a"></path></g></g><g><g fill="#93E65C"><path d="M13.805 11.45C8.437 17.473 0 27.053 0 27.053c15.178 3.956 22.171-5.646 23.266-8.97 1.468-4.457-.606-6.631-1.78-7.34-3.98-2.405-6.934-.129-7.68.709z" id="logo_c"></path></g><g fill-opacity=".75" fill="url(#logo_d)" style="mix-blend-mode:overlay"><path d="M13.805 11.45C8.437 17.473 0 27.053 0 27.053c15.178 3.956 22.171-5.646 23.266-8.97 1.468-4.457-.606-6.631-1.78-7.34-3.98-2.405-6.934-.129-7.68.709z" id="logo_c"></path></g></g><g opacity=".448"><g fill="#60DB69"><path d="M19.203 23.678c-2.435.016-7.89.086-16.363.209l10.485-11.884.68-.768c.986-.944 3.806-2.75 7.515-.51 1.178.712 3.26 2.896 1.787 7.37-.428 1.298-1.75 3.55-4.104 5.583z" id="logo_e"></path></g><g fill-opacity=".65" fill="url(#logo_f)"><path d="M19.203 23.678c-2.435.016-7.89.086-16.363.209l10.485-11.884.68-.768c.986-.944 3.806-2.75 7.515-.51 1.178.712 3.26 2.896 1.787 7.37-.428 1.298-1.75 3.55-4.104 5.583z" id="logo_e"></path></g></g></g></svg>
                    </use>
                    </svg>
                </a>
            </div>
        </div>
        </div>
</template>

<script>
export default {
}
</script>

<style lang='css' scoped>
    a {
        text-decoration: none;
    }
    #footbar-container {
        background-color: #DCDFE6;
        height: 66px;
        text-align: center;
        position: relative;
        display: flex;
        justify-content: space-around;
    }
    .footbar-item {
        width: 200px;
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }
    .footbar-item:nth-child(2) {
        width: 200px;
    }
    .icon-pic {
        vertical-align: middle;
        width: 200px;
        height: 50px;
    }
    .custom-icon {
        color: #1da1f2;
    }
    .footbar-text {
        color: #25b864;
    }
    .seperate-line {
        box-sizing: border-box;
        height: 25px;
        width: 1px;
        border-left: 1px dashed black;
        margin: 0 8px;
    }
    .svg-holder {
        display: inline-block;
        padding-left: -400px;
        width: 40px;
        position: relative;
        bottom: -5px;
    }
    @media only screen and (max-width: 600px) {
        #footbar-container {
            justify-content: center;
        }
        .footbar-item:nth-child(1) {
            display: none;
        }
        .icon-pic {
            height: 25px;
            width: 100px;
        }
        .footbar-item:nth-child(2) {
            width: 100px;
            order: 2;
        }
        .footbar-item:nth-child(3) {
            order: 1;
            width: 90px;
            overflow: hidden;
        }
        .footbar-item:nth-child(3) > span {
            display: none;
        }
    }
</style>


